<template>
  <div id="recommendlist">
    <div class="g-title song-list">
      推荐歌单
      <router-link to="/songlist" class="moreLink">
        更多>
      </router-link>
    </div>
    <el-row name="歌单列表">
      <el-col :span="5" v-for="item in playList" :key="item.id">
        <router-link :to="{path:'detail',query : {id : item.id}}">
          <img class="image" :src="item.coverImgUrl + '?param=145y145'" />
          </br>
        </router-link>
        <router-link :to="{path:'detail',query : {id : item.id}}" class="fashionname">{{item.name}}</router-link>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api from '../../api'
export default {
  data: function () {
    return {
      playList: []
    }
  },
  mounted() {
    this.$store.state.admintop = "/";
    //初始化音乐列表
    this.$nextTick((res) => {
      this.submitForm()
    })
  },
  methods: {
    submitForm() {
      this.$axios.get(api.getFashion('全部', '0', '10'))
        .then((res) => {
          //console.log("输出:"+res.data.playlists);
          this.playList = res.data.playlists;
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
}
</script>

<style>
#recommendlist {
  width: 980px;
  display: block;
  margin: 0 auto;
}

.el-col-5 {
  width: 20%
}

.el-carousel {
  margin-top: 20px;
}

.el-carousel__item {
  margin-left: 100px;
}

.g-title {
  padding-left: 25px;
  color: #333;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}

.g-title a {
  float: right;
  font-size: 14px;
  color: #666;
  margin-right: 60px;
}

.song-list {
  background: url("/static/aei.png") no-repeat left center;
  background-size: 20px 20px;
}

#recommendlist .el-row {
  margin-top: 10px;
}

.image {
  margin-top: 10px;
}

.fashionname {
  display: inline-block;
  font-size: 13px;
  width: 155px;
  height: 40px;
  margin-top: 10px;
  color: #000000;
  text-decoration: none;
}

.fashionname:hover {
  text-decoration: underline;
}
</style>

